﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head runat="server">

    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <title>Musicallis</title>

    <!-- Estilos e JavaScript -->
    <link href="../content/primary.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="../scripts/abas.js"></script>

</head>
<body>

    <div class ="conteudo">
	<div class ="titulo">
		<span class="logo">
			<img src="../images/musicallis-green.png" alt="musicallis">
		</span>
		<span class="links">
			<a href= "http://www.facebook.com/mackprojects"><img src="../images/facebook.png" border="0"></a>
			<a href= "http://www.twitter.com"><img src="../images/twitter.png" border="0"></a>
			<a href= "http://www.plus.google.com"><img src="../images/google.png" border="0"></a>
			<a href= ""><img src="../images/system-config.png" border="0"></a>
		</span>
	</div>

	<div class="limite">
	
		<div class="limite_dois">
						  
			<div class="profile">
				<span class="photo"></span>
				<span class="information">
				<p><b> Name: </b> Emanuel Wattis </p>
				<p><b> Age: </b> 22 Years </p>
				<p><b> Instrument: </b> Bass </p>
				<p><b> Style: </b> Alternative Rock </p>
				</span>
			</div>
			
			<!--Navegacao em abas-->
			<div id="divFora">
			
				<button class="testeTres"></button>	
				<button class="teste"></button>
			
				<div id="aba1"></div>
                <div id="aba2"></div>
                <div id="aba3"></div>
                <div id="aba4"></div>
			</div>		
		</div>
		
		<div class = "publicity"></div>
	</div>	
</div>

    <script>
        var aba = new JTabControl("divFora", 700, 300);
        aba.addTab("aba1", "Friends");
        aba.addTab("aba2", "Playlist");
        aba.addTab("aba3", "Search");
        aba.addTab("aba4", "Points");

        $(".teste").click(function () {
            $(".profile").toggle({
                height: 0
            }, 800);
            $(this).toggleClass('testeDois');
            $(this).toggleClass('teste');
        });

        $(".testeTres").click(function () {
            $(".publicity").toggle({
                width: 0,
                padding: 0,
                border: 0
            }, 800);
            $(this).toggleClass('testeQuatro');
            $(this).toggleClass('testeTres');
        });
    </script>

</body>
</html>
